<template>
    <div class="home container-fluid">
        <header>
            <div class="logo-bg animate pull-left">
                <p>Duckling</p>
            </div>
            <div class="navBar animate">
                <span class="sidebar-toggle"><i class="fa fa-bars"></i></span>
                <span class="control-sidebar pull-right"><i class="fa fa-gears"></i></span>
                <span class="full-screen pull-right"><i class="glyphicon glyphicon-fullscreen"></i></span>
            </div>
        </header>
        <main>
            <aside class="main-sidebar pull-left animate">
                <div class="user-panel">
                    <img src="./../../assets/images/avatar.jpg" class="avatar" alt="头像">
                    <span class="name">Hi,杰克</span>
                </div>
                <ul class="sidebar-menu">
                    <li>
                        <router-link to="/home/desktop">
                            <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;桌面
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/home/village">
                            <span><i class="fa fa-tachometer"></i></span>&nbsp;&nbsp;小区管理
                            <!--<span class="glyphicon glyphicon-chevron-right pull-right sharpAngle"></span>-->
                        </router-link>
                    </li>
                </ul>
            </aside>
            <div class="main-container">
                <router-view></router-view>
            </div>
        </main>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        methods : {

        }
    }

</script>
<style scoped lang="less">
    .home{
        padding:0;
        color:white;
        .animate{
            transition: width .2s linear;
        }
        header{
            position: fixed;
            overflow: hidden;
            width: 100%;
            .logo-bg{
                background: #367fa9;
                width: 230px;
                height:50px;
                p{
                    font-size:20px;
                    line-height:50px;
                    text-align: center;
                    margin-bottom:0;
                }
            }
            .logo-bg:hover{
                background: #2773A9;
            }
            .navBar{
                overflow: hidden;
                /*width: calc(100% - 230px);*/
                padding:0;
                background:#3c8dbc;
                height: 50px;
                span{
                    display: inline-block;
                    line-height:50px;
                    width:42px;
                    height:50px;
                    font-size:16px;
                    text-align:center;
                    &.sayHello{
                        width:80px;
                     }
                }
                span:hover{
                    background-color:#3A84BC;
                }
            }
        }
        main{
            padding-top:50px;
            overflow: hidden;
            width:100%;
            height: 100vh;
            .main-sidebar{
                overflow: hidden;
                background: #222d32;
                width:230px;
                height:100%;
                .user-panel{
                    padding: 10px;
                    height: 65px;
                    margin-bottom:10px;
                    vertical-align: middle;
                    .avatar{
                        height: 45px;
                        width: 45px;
                        border-radius: 50%;
                    }
                    .name{
                        display: inline-block;
                        padding-left:10px;
                    }
                }
                ul{
                    padding:0;
                    margin:0;
                    li{
                        a{
                            display: inline-block;
                            width:100%;
                            height:44px;
                            line-height:20px;
                            padding: 12px 10px 12px 15px;
                            border-left:3px solid #222d32;
                            color:#b8c7ce;
                            font-size: 14px;
                            text-decoration: none;
                            transition: color .1s linear;
                        }
                        a.router-link-active{
                            border-left:3px solid #3c8dbc;
                            color:#fff;
                        }
                        a:hover{
                            color:#fff;
                        }
                        .sharpAngle{
                            line-height: 20px;
                            font-size:12px;
                        }
                    }
                }
            }
            .main-container{
                overflow: hidden;
                height: 100%;
                background: #f4f5f9;
            }
        }
    }
    @media screen and (max-width : 750px){
        .home {
            header {
                .logo-bg{
                    width: 100%;
                }
                .navBar{
                    width:100%;
                }
            }
            main{
                padding-top:100px;
                .main-sidebar{
                    width: 0;
                }
            }
        }
    }
</style>
